<script setup lang="ts">
import homeApi from '@/service/api/home'
import WorksList from './components/WorksList.vue'
import { getColor } from '@/enum/color'

defineOptions({
  name: 'Tag'
})

const tagList = ref([])
const init = async () => {
  const { data } = await homeApi.tags()
  tagList.value = data.map(el => {
    const info = getColor()
    return {
      id: el.id,
      name: el.name,
      ...info
    }
  })
}

const keyList = ref([])
const getKeyList = async () => {
  const { data } = await homeApi.horKeyword()
  keyList.value = data.map(el => {
    const info = getColor()
    return {
      id: el.id,
      text: el.text,
      ...info
    }
  })
}
init()
getKeyList()

const worksRef = ref()
const handWork = (e: any) => {
  worksRef.value.open({
    name: e.name,
    type: 'tag'
  })
}

let lsClose: boolean = false
const handClose = () => {
  lsClose = true
}

const handSearch = e => {
  console.log(e)
  worksRef.value.open({
    name: e.text,
    type: 'search'
  })
}
onActivated(() => {
  if (lsClose) {
    worksRef.value.show()
  }
})
</script>

<template>
  <div class="tag-page" id="tag-page">
    <div class="nav">热门标签</div>
    <div class="tags">
      <div
        class="tag"
        v-for="item in tagList"
        :key="item.id"
        :style="{ background: item.background, color: item.color }"
        @click="handWork(item)"
      >
        <i class="esayIcon esayIcon-biaoqian"></i>
        <span>{{ item.name }}</span>
      </div>
    </div>
    <div class="nav">热门搜索</div>
    <div class="tags">
      <div
        class="tag"
        v-for="item in keyList"
        :key="item.id"
        :style="{ background: item.background, color: item.color }"
        @click="handSearch(item)"
      >
        <i class="esayIcon esayIcon-biaoqian"></i>
        <span>{{ item.text }}</span>
      </div>
    </div>
    <works-list ref="worksRef" @ls-close="handClose" />
  </div>
</template>

<style scoped lang="scss">
.nav {
  margin: 24px 24px 12px 24px;
  color: #333;
  font-size: 16px;
  position: relative;
  padding-left: 8px;
  &:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 14px;
    background: #00aeec;
  }
}
.tags {
  padding: 0 24px 24px 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  .tag {
    padding: 2px 10px;
    border-radius: 5px;
    cursor: pointer;
    i {
      font-size: 13px;
    }
    span {
      font-size: 13px;
      padding-left: 4px;
    }
  }
}
</style>
